<template>
  <div class="extension">
    <div v-on:mouseenter="filterHandle" v-show="this.filterShow" class="filter"></div>
    <div v-on:mouseenter="boxEnterHandle" v-on:mouseleave="boxLeaveHandle" class="box">
      <div>
        <div class="title">{{ this.$parent.extendTitle }}</div>
        <ul>
          <li v-for="item in this.$parent.extend" :key="item.id">
            {{ item.value }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "extension",
  data() {
    return {
      filterShow: false
    }
  },
  beforeUpdate() {
    if (this.$parent.extendTitle !== null) {
      this.filterShow = true;
      document.querySelector(".box").style.width = "200px";
      document.querySelector(".filter").style.background = "rgba(0, 0, 0, 0.3)";
    } else {
      setTimeout(() => {  // 延时关闭遮罩
        if(this.$parent.extend === null) {
          this.filterShow = false;
        }
      }, 310);
      document.querySelector(".box").style.width = "0px";
      document.querySelector(".filter").style.background = "rgba(0, 0, 0, 0)";
    }
  },
  methods: {
    filterHandle() {
      this.$parent.filterHandle();
    },
    boxEnterHandle() {
      this.$parent.clearTimer();
    },
    boxLeaveHandle() {
      this.$parent.setTimer();
    }
  },
};
</script>

<style lang="scss" scoped>
.extension {
  width: 0px;
  height: 100vh;
  position: absolute;
  left: 270px;
  top: 0;
  z-index: 9;
  .filter {
    width: 100%;
    background: rgba(0, 0, 0, 0);
    height: 100%;
    transition: .3s;
    width: calc(100vw - 270px);
  }
  .box {
    background: #f2f2f2;
    overflow: hidden;
    height: 100%;
    text-align: left;
    position: absolute;
    left: 0px;
    top: 0;
    width: 0px;
    transition: .3s;
    transition-timing-function: ease-out;
    // transition-delay: .2s;
    div {
      padding: 100px 0px 10px 40px;
      .title {
        padding: 0 0;
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 20px;
        width: 200px;
      }
      ul {
        list-style: none;
        width: 200px;
        li {
          font-size: 0.85rem;
          cursor: pointer;
          height: 30px;
          line-height: 30px;
          margin-bottom: 5px;
          transition: 0.3s;
        }
        li:hover {
          transition: 0.3s;
          opacity: 0.6;
        }
        li::before {
          content: "";
          width: 12px;
          height: 2px;
          margin: 13px 7px 0 0;
          display: block;
          float: left;
          background: #e1e1e1;
        }
      }
    }
  }
}
</style>